"use client"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { ArrowUpDown, ArrowUp, ArrowDown, Search, X } from "lucide-react"

interface SortAndFilterControlsProps {
  sortBy: string
  sortOrder: 'desc' | 'asc'
  onSort: (field: 'energy_value' | 'strength' | 'volume' | 'change_percent' | 'volume_ratio') => void
  filterCodes: string
  onFilterChange: (value: string) => void
  extraButton?: React.ReactNode
}

/**
 * 排序和筛选控制组件
 */
export function SortAndFilterControls({
  sortBy,
  sortOrder,
  onSort,
  filterCodes,
  onFilterChange,
  extraButton
}: SortAndFilterControlsProps) {
  const getSortIcon = (field: string) => {
    if (sortBy !== field) return <ArrowUpDown className="w-3 h-3" />
    return sortOrder === 'desc' ? <ArrowDown className="w-3 h-3" /> : <ArrowUp className="w-3 h-3" />
  }

  const getSortLabel = (field: string) => {
    const labels = {
      energy_value: '能量值',
      strength: '强度',
      volume: '成交量',
      change_percent: '涨跌幅',      // 修正：change_percent 是涨跌幅
      volume_ratio: '成交量比'        // 修正：volume_ratio 是成交量比
    }
    return labels[field as keyof typeof labels] || field
  }

  return (
    <div className="flex flex-col sm:flex-row gap-4 mb-6">
      {/* 筛选输入框 */}
      <div className="relative flex-1 max-w-md">
        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
        <Input
          placeholder="输入股票代码或名称筛选"
          value={filterCodes}
          onChange={(e) => onFilterChange(e.target.value)}
          className="pl-10 pr-10"
        />
        {filterCodes && (
          <Button
            variant="ghost"
            size="sm"
            className="absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0"
            onClick={() => onFilterChange('')}
          >
            <X className="w-3 h-3" />
          </Button>
        )}
      </div>

      {/* 排序按钮组 */}
      <div className="flex items-center gap-2">
        <span className="text-sm text-muted-foreground whitespace-nowrap">排序:</span>
        {(['energy_value', 'strength', 'volume', 'volume_ratio', 'change_percent'] as const).map((field) => (
          <Button
            key={field}
            variant={sortBy === field ? "default" : "ghost"}
            size="sm"
            onClick={() => onSort(field)}
            className="h-7 text-xs"
          >
            {getSortIcon(field)}
            <span className="ml-1">{getSortLabel(field)}</span>
          </Button>
        ))}
        
        {/* 额外按钮 */}
        {extraButton}
      </div>
    </div>
  )
}
